<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泵站管理</title>
    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

    <!-- 引入封装的请求 -->
    <script src="../js/page10ajax的封装.js"></script>
    <script src="../json/page10.json"></script>

    <link rel="stylesheet" href="../font/iconfont.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>
    <link rel="stylesheet" href="../css/10.css">

    <script src="../js/echarts3.js"></script>
</head>

<body>
    <div class="map">

        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中
            map.setMapStyleV2({
                styleId: '4460912dccb85a7bcfcdd055449b0407'
            });
        </script>

    </div>
    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
    </div>
    <div class="nav">
        <div class="navbar"><a href="0.html">&emsp;首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar"><a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar"><a href="3.html">管网查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar"><a href="4.html">管网统计</a>
            <div class="tri"></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class=" navbar navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar"><a href="8.html">企业管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar" id="navbar10"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第十个 -->
        <!-- 用户 -->
        <div class="shezhi"><span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"></span></div>
        <div class="yonghu "><span class="iconfont icon-yonghu">admit</span></div>
        <div class="tuichu"><span class="iconfont icon-exit-full"></span></div>
    </div>
    <div class="znz">
        <!-- 指南针 -->
        <div class="compass"></div>
        <div class="compass1"></div>
        <!-- 小房子 -->
        <div class="sousuo"><span class="iconfont icon-sousuo"></span></div>
        <div class="jia"><span class="iconfont icon-jia"></span></div>
        <div class="jian"><span class="iconfont icon-jianhao"></span></div>
        <div class="tubiao"><img src="../img/images/10010.png" alt="" width="30px" height="30px"></div>
        <div class="fangzi"><span class="iconfont icon-fangzi1"></span></div>
        <div class="quanping"><span class="iconfont icon-full-screen"></span></div>
    </div>
    <!-- 中间的大盒子 -->
    <div class="box">
        <div class="box1" id="line"></div>
        <div class="chart"><input type="text" placeholder="请输入关键词" class="search"> </div>

        <div class="chart2"> <input type="button" value="查询" class="but">
            <div class="sousuo2"><span class="iconfont icon-sousuo"></span></div>
        </div>

    </div>
    <!-- 折线图小盒子 -->
    <script>
        (function() {
            var chartDom = document.getElementById('line');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '株树岗泵站',
                        '',
                        'Bz01',
                        '',
                        'bz005',
                        '',
                        'bz007',
                        '',
                        'bz009',
                        '',
                        'bz011',
                        ''
                    ]
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "gray",
                            type: "dashed"
                        }
                    }
                },
                title: {
                    text: '流量(m^3/s)'
                },
                series: [{
                    data: [2000, 0, 0, 0, 0, 100, 350, 0, 0, 0, 0, 0],
                    type: 'line',
                    areaStyle: {}
                }]
            };

            option && myChart.setOption(option);
        })();

        function tabFun(page, page10) {
            var table = document.getElementsByTagName("table")[0];
            // 每次渲染都要初始化一下表格，只剩下表头
            table.innerHTML = `<table border="1" cellspacing="0" cellpadding="5">
                          <tr>
                            <td>序号</td>
                            <td>名称</td>
                            <td>流量</td>
                            <td>水位</td>
                            <td>电流</td>
                            <td>开关状态</td>
                          </tr>
                        </table>`;
            // <td>材质</td>
            // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
            for (var i = 5 * (page - 1); i < (5 * page <= page10.page.length ? 5 * page : page10.page.length); i++) {
                table.innerHTML += `<tr>
                                <td>${page10.page[i].id}</td>
                                <td>${page10.page[i].name}</td>
                                <td>${page10.page[i].traffic}</td>
                                <td>${page10.page[i].level}</td>
                                <td>${page10.page[i].current}</td>
                                <td>${page10.page[i].state}</td>
                            </tr>`;
            }
            // <td>${page10.gwtj-page10[i].material}</td>
        }

        ajaxFun("../json/page10.json", function(page10) {
            page10 = JSON.parse(page10);
            console.log(page10);
            // 规定一页展示几条数据 10

            // 得到总的数据数
            var num = page10.page.length;
            console.log(num);
            // 根据总的数据数得到页数
            var pageNum = Math.ceil(num / 5);
            console.log(pageNum);
            // 获取分页元素
            var pagination = document.getElementsByClassName("pagination")[0];
            // 循环渲染
            for (var i = 1; i <= pageNum; i++) {
                pagination.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a>`
            }
            pagination.innerHTML += `<li class="page-item">
                                  <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                  </a>
                                </li>`;
            tabFun(1, page10);

            // 搜索
            // 搜索部分
            // 获取搜索框和搜索按钮
            var inp = document.getElementsByClassName("search")[0];
            var btn = document.getElementsByClassName("but")[0];

            // 准备一个空数组，用来保存符合搜索条件的数据
            var newData = [];

            btn.onclick = function() {
                var table = document.getElementsByTagName("table")[0];
                console.log(table);
                table.innerHTML = `<table border="1" cellspacing="0" cellpadding="5">
                                <tr>
                            <td>序号</td>
                            <td>名称</td>
                            <td>流量</td>
                            <td>水位</td>
                            <td>电流</td>
                            <td>开关状态</td>
                          </tr>
                                                </table>`;

                // 拿到输入框的内容
                console.log(page10.page);

                // 遍历对应的数据
                for (var i = 0; i < page10.page.length; i++) {
                    // 对象的遍历
                    for (var key in page10.page[i]) {
                        // console.log(key);
                        // 可以拿到对应的值
                        console.log(page10.page[i][key]);

                        // 将值和搜索框的内容进行比对
                        if (page10.page[i][key].toString().includes(inp.value)) {
                            newData.push(page10.page[i]);
                            // 只要发现有符合所搜条件的内容，就直接终止遍历
                            break;
                        }
                    }
                }

                console.log(newData);
                // tabFun(page, newData);

                // 拿着符合条件的数据进行页面渲染
                for (var i = 0; i < newData.length; i++) {

                    table.innerHTML += `<tr>
                                <td>${newData[i].id}</td>
                                <td>${newData[i].name}</td>
                                <td>${newData[i].traffic}</td>
                                <td>${newData[i].level}</td>
                                <td>${newData[i].current}</td>
                                <td>${newData[i].state}</td>
                            </tr>`;
                }

            }




            // 获取所有的分页元素
            var pageItem = document.getElementsByClassName("page-link");
            // 循环事件绑定（避开了上一页和下一页）
            for (var j = 1; j < pageItem.length - 1; j++) {
                pageItem[j].onclick = function() {
                    console.log(this.innerHTML);

                    // 调用渲染的函数，进行数据的渲染
                    tabFun(this.innerHTML, data);
                }
            }
        })
    </script>
    <!-- 右上角小表格 -->
    <div class="big">
        <div>
            <h4 class="top"><img src="../img/images/图标.png" width="28" class="h4">&nbsp;图层选择</h4>
        </div>
        <div class="bop">
            <div class="one"><input type="checkbox" name="select">
                <div class="diyi1"></div>
                雨污合流管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked>
                <div class="diyi2"></div>
                污水管道
            </div>
            <div class="three"><input type="checkbox" name="select" checked>
                <div class="diyi3" checked></div>
                雨水管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10016.png" width="25">&nbsp;排污检修井
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10017.png" width="25">&nbsp;排洪检修井
            </div>
            <div class="two"><input type="checkbox" name="select"><img src="../img/images/10018.png" width="25">&nbsp;检修井
            </div>
            <div class="four"><input type="checkbox" name="select"><img src="../img/images/10019.png" width="25">&nbsp;雨篦
            </div>
            <div class="one"><input type="checkbox" name="select" checked>
                <div class="circle1"></div>&nbsp;污水泵站
            </div>
            <div class="five"><input type="checkbox" name="select" checked>
                <div class="circle2"></div>&nbsp;污水处理厂
            </div>
            <div class="six"><input type="checkbox" name="select" checked><img src="../img/images/10020.png" width="25">&nbsp;企业
            </div>
        </div>
    </div>
    <div class="page1">
        <!-- 表格部分 -->
        <table cellspacing="0" cellpadding="6" class="biaoge">
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>流量</td>
                <td>水位</td>
                <td>电流</td>
                <td>开关状态</td>
            </tr>
        </table>
        <div class="example">
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
</body>


</html>